<template>
  <div class="chart-item row3-left">
    <div class="chart-header">
      <h3>器具出库趋势</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="quarter">本季度</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div ref="outboundChart" class="chart-row3"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'OutboundTrendChart',
  data() {
    return {
      timeRange: 'month',
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.outboundChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            formatter: function(params) {
              let result = params[0].name + '<br/>'
              let total = 0
              params.forEach(function(item) {
                total += item.value
                result += item.marker + item.seriesName + ': ' + item.value + '<br/>'
              })
              result += '<b>总出库量: ' + total + '</b>'
              return result
            }
          },
          legend: {
            data: ['华东库房', '华南库房', '华北库房', '西南库房', '其他库房'],
            top: '5%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['02-01', '02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08', '02-09', '02-10', '02-11', '02-12', '02-13', '02-14', '02-15'],
            axisLabel: {
              rotate: 0,
              interval: 0,
              fontSize: 11,
              color: '#666'
            },
            axisLine: {
              lineStyle: {
                color: '#e0e0e0'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '出库数量',
            nameTextStyle: {
              color: '#666',
              fontSize: 12
            },
            axisLabel: {
              color: '#666',
              fontSize: 11
            },
            axisLine: {
              lineStyle: {
                color: '#e0e0e0'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#f0f0f0',
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '华东库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(84, 112, 198, 0.8)' },
                  { offset: 1, color: 'rgba(84, 112, 198, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 234, 189]
            },
            {
              name: '华南库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(145, 204, 117, 0.8)' },
                  { offset: 1, color: 'rgba(145, 204, 117, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [85, 92, 78, 97, 65, 159, 148, 127, 141, 169, 205, 235, 218, 169, 142]
            },
            {
              name: '华北库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(250, 200, 88, 0.8)' },
                  { offset: 1, color: 'rgba(250, 200, 88, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [65, 72, 58, 77, 45, 129, 118, 97, 111, 139, 175, 205, 188, 139, 112]
            },
            {
              name: '西南库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(238, 102, 102, 0.8)' },
                  { offset: 1, color: 'rgba(238, 102, 102, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [45, 52, 38, 57, 25, 99, 88, 67, 81, 109, 145, 175, 158, 109, 82]
            },
            {
              name: '其他库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(115, 192, 222, 0.8)' },
                  { offset: 1, color: 'rgba(115, 192, 222, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [25, 32, 18, 37, 15, 69, 58, 37, 51, 79, 115, 145, 128, 79, 52]
            }
          ]
        }

        this.chart.setOption(option)
      })
    },

    handleTimeRangeChange(range) {
      this.timeRange = range
      this.$emit('time-range-change', range)
      // 这里可以根据时间范围更新图表数据
      console.log('出库趋势时间范围变化:', range)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
